<template>
  <div>
    <!-- list-type="picture-card"设置为照片墙属性 -->
    <!-- action图片上传地址 -->
    <!-- :on-preview="onPreview"图片预览钩子  触发的函数 -->
    <!-- :http-request="uploadImg" 覆盖默认的上传行为，可以自定义上传的实现 -->
    <!-- :on-remove="onRemove"移除图片的钩子 触发的函数 -->
    <!-- :on-change="onChange" 文件状态改变时的钩子，添加文件、上传成功和上传失败时都会被调用 -->
    <el-upload
      list-type="picture-card"
      action="#"
      :file-list="fileList"
      :class="{disable: showIamges?fileList.length>0:fileList.length>3}"

      :on-preview="onPreview"

      :http-request="uploadImg"

      :on-remove="onRemove"
      :on-change="onChange"
      :before-upload="beforeUpload"
      :limit="showIamges?1:4"
    >
      <i class="el-icon-plus" />
    </el-upload>
    <el-progress
      v-if="isShoeProgress"
      :text-inside="true"
      :stroke-width="20"
      :percentage="percent"
      style="width:148px"
    />

    <!-- <el-dialog title="预览" :visible.sync="isShowDialog">
      <el-row type="flex" justify="center">
        <img :src="imgSrc" alt="">
      </el-row>
    </el-dialog> -->
    <el-dialog :visible.sync="isShowDialog" style="">
      <el-row type="flex" justify="center">
        <img :src="imgSrc" alt="" style="width: 70%;">
      </el-row>
    </el-dialog>
  </div>
</template>

<script>
var COS = require('cos-js-sdk-v5')

// SECRETID 和 SECRETKEY请登录 https://console.cloud.tencent.com/cam/capi 进行查看和管理
var cos = new COS({
  SecretId: 'AKIDSjkUxB8tPfdKlwqTpwlJabLo0wc190bv',
  SecretKey: '4sRjjSu62h6HBpCJ9iz0mHVS8YhaDZeS'
})
export default {
  props: {
    showIamges: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      fileList: [
        // {
        //   url: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-00e100a2-7d86-4bd0-8045-2b513dd451c8/39412987-7b45-4cc5-8985-7049a7eb2d0e.png'
        // }
      ],
      isShowDialog: false,
      imgSrc: '',
      isShoeProgress: false,
      percent: 0,
      uid: '' // 绑定图片uid用于修改图片对于uid的url
    }
  },
  methods: {
    // 图片预览触发的钩子
    onPreview(file) {
      // console.log(file)
      this.imgSrc = file.url
      this.isShowDialog = true
    },
    // 移除图片触发的钩子
    onRemove(file, newfileList) {
      // console.log(newfileList)
      this.fileList = newfileList
    },
    // 文件发生改变触发的钩子
    onChange(file, fileList) {
      // console.log(fileList)
      this.fileList = fileList
    },
    // 文件上传前的钩子
    beforeUpload(file) {
      this.isShoeProgress = true
      // console.log('文件上传前')
      // console.log(file)

      // 保存上传前图片uid 用于修改图片对于uid的url
      this.uid = file.uid

      const imgRule = ['image/png', 'image/gif', 'image/jpeg']
      if (!imgRule.includes(file.type)) {
        this.$message.warning('暂时只支持 jpeg、png、gif 图片格式')
        this.isShoeProgress = false
        return false
      }

      const maxImgSize = 2 * 1024 * 1024
      if (file.size > maxImgSize) {
        this.$message.warning('图片大小不能超过 2M')
        this.isShoeProgress = false
        return false
      }
    },

    // 上传图片
    uploadImg(param) {
      // console.log('图片上传')
      // console.log(param)
      cos.putObject({
        // 存储桶名
        Bucket: 'hr-1258001656',
        // 存储桶所在地域
        Region: 'ap-nanjing',
        // 上传后的文件名
        Key: param.file.name,
        // 固定写法,表示标准存储
        StorageClass: 'STANDARD',
        // 要上传的文件对象(文件体)
        Body: param.file,
        onProgress: (progressData) => {
          // console.log(JSON.stringify(progressData))
          // console.log(progressData)
          this.percent = parseInt(progressData.percent * 100)
          // this.percent = Math.round(progressData.percent * 100)
        }
      }, (err, data) => {
        console.log(err || data)
        // this.fileList[0].url = 'http://' + data.Location
        // this.fileList[0].status = 'success'
        const img = this.fileList.find(item => this.uid === item.uid)
        img.url = 'http://' + data.Location
        img.status = 'success'
        setTimeout(() => {
          this.isShoeProgress = false
        }, 1000)
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.disable{
  ::v-deep .el-upload{
  display: none;

}
}

::v-deep .el-dialog{
  background-color: transparent;
    box-shadow: none;
}
::v-deep .el-dialog__header{
  background-color: transparent;
}

</style>
<style lang="scss">
img{
  // object-fit: contain;
  object-fit: cover;
}
</style>
